<template>
  <el-dialog :title="title"  class="disableBuyer" :visible.sync="isShowModel" @close="$emit('update:isShowDetail', false)" :before-close="handleClose" :close-on-click-modal="false">
    <el-form :model="buyerInfo" :inline="false" label-width="120px" :rules="rules" ref="buyerInfo">
      <el-form-item label="名称：" required>
        {{dataInfo.name}}
      </el-form-item>
      <el-form-item label="禁用：" required prop="status">
        <el-checkbox v-model="buyerInfo.status" disabled>{{title}}</el-checkbox>
      </el-form-item>
      <el-form-item label="封号理由：" required prop="content">
        <el-input
          v-model="buyerInfo.content"
          autocomplete="off"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 6}"
          placeholder="请输入禁用理由（必填）"></el-input>
        <p class="textAreaMsg">{{buyerInfo.content ? buyerInfo.content.length : 0}}/150</p>
      </el-form-item>
      <p class="tip" v-if="title === '禁用供应商'">正在禁用供应商，禁用后供应商无法登陆和操作任何功能，请谨慎操作，操作不可撤销</p>
      <p class="tip" v-if="title === '禁用采购商'">正在禁用采购商，禁用后采购商无法登陆和操作任何功能，请谨慎操作，操作不可撤销</p>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetModel">取 消</el-button>
      <el-button type="primary" @click="submitStatus" :loading="isSuccess">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
    export default {
        name: "DisableBuyer",
        props: {
          isShowDetail: {
            type: Boolean,
            default: false
          },
          dataInfo: {
            type: Object,
            default: () => {}
          },
          url: {
            type: String,
            default: ""
          },
          id: {
            type: Number,
            default: 0
          },
          title: {
            type: String,
            default: "禁用采购商"
          }
        },
        data() {
          return {
            isShowModel: this.isShowDetail,
            buyerInfo: {
              status: true,
              content: ""
            },
            isSuccess: false,
            rules: {
              content: [
                { required: true, message: '请输入禁用理由', trigger: 'blur' },
                { max: 150, message: '输入的禁用理由字数不能超过150个字符', trigger: ['blur', 'change'] }
              ]
            }
          }
        },
        methods: {
          submitStatus() {
            let data = {
              ...this.buyerInfo,
              id: this.id,
              status: 0
            }
            this.$refs['buyerInfo'].validate((valid) => {
                if (valid) {
                  this.isSuccess = true
                  ajax.post(this.url, data).then(res => {
                    if(res.code === "10000000") {
                      this.$message({
                        type: 'success',
                        message: '禁用成功!'
                      });
                      this.isSuccess = false
                      this.$emit('fresh')
                      this.resetModel()
                    } else {
                      this.$message.error(res.message)
                      this.isSuccess = false
                    }
                  })
                }
            })
          },
          handleClose(done) {
            this.$refs['buyerInfo'].resetFields()
            this.isShowModel = false
            done()
          },
          resetModel() {
            this.$refs['buyerInfo'].resetFields()
            this.isShowModel = false
          }
        },
        computed: {

        },
        watch: {
          isShowDetail(val) {
            this.isShowModel = val;
          }
        }
    }
</script>

<style lang="scss">
.disableBuyer {
  .el-dialog {
    width: 500px;
    .textAreaMsg {
      width: 100%;
      text-align: right;
    }
    .tip {
      width: 100%;
      text-align: center;
      font-size: 12px;
      color: #999;
    }
  }
}
</style>
